import React, { useEffect } from 'react'
import "./toastitem.less"

interface IProp {
    offset: number;
    // id: number;
    data: ToastData;
    destroy: (id: number) => void
}

export default function ToastItem({ data, offset, destroy }: IProp) {
    // 每次被渲染，就使用一个定时器，让自己在一定的时间后消失
    useEffect(() => {
        setTimeout(() => {
            // 通知外面把自己删除
            destroy(data.id);
        }, 1500);
    }, [])

    interface KeyMap {
        [index: string]: string;
    }

    const textMap: KeyMap = {
        success: "成功",
        error: '失败'
    }

    return (
        <div className='toast-item' style={{ top: offset }}>
            {/* 自己根据这里的 data.type 显示不同的类型的消息 */}
            <div className={data.type}>
                {textMap[data.type]}
            </div>
            <div>{data.text}</div>
        </div>
    )
}
